<template>
  <div>
    <h1>通讯录</h1>
    <button @click="add">新建联系人</button>
    <!-- 最大的组件，可以显示列表和弹窗 -->
    <list :list="list" @edit="edit" @del="del"></list>
    <edit ref="edit" v-show="isShow" :openType="openType" @close="close" @add="addContact" @editContact="editContact"></edit>
  </div>
</template>

<script>
import list from './list.vue'
import edit from './edit.vue'
export default {
  components: {
    list: list,
    edit: edit,
  },
  data() {
    return {
      // 联系人数据
      list: [
        {name: 'Tom', phone: 18933333333},
        {name: 'Jack', phone: 13933331111},
        {name: 'Jane', phone: 13633333322},
        {name: 'Mary', phone: 15833223333},
      ],
      // 是否显示弹窗
      isShow: false,
      openType: '新建'
    }
  },
  methods: {
    // 子组件通知父组件关闭弹窗
    close() {
      this.isShow = false;
    },
    // 点击新建按钮
    add() {
      this.isShow = true;
      this.openType = '新建';
      // 调用edit子组件中的方法，给子组件赋值
      this.$refs.edit.setVal({name: '', phone: ''});
    },
    // 点击编辑按钮
    edit(val) {
      this.isShow = true;
      this.openType = '编辑';
      // 调用edit子组件中的方法，给子组件赋值
      this.$refs.edit.setVal(val);
    },
    // 添加联系人
    addContact(val) {
      this.list.push(val)
    },
    // 编辑联系人
    editContact(val) {
      console.log(val);
      this.list[val.idx].name = val.name;
      this.list[val.idx].phone = val.phone;
    },
    // 删除联系人
    del(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

<style>

</style>